<template>
  <div class="device-home">
    <div class="home-top">
      <div class="left">
        "{{ userInfo.UserName }}"欢迎进入数智化工厂协同平台,今天是{{ newDate
        }}{{ week }}
      </div>
      <!-- <div class="right">
				<div class="user-icon">
					<a-badge :count="1"><a-avatar icon="user" /></a-badge>
				</div>
				<div class="user-info">
					<div class="name">杨钊</div>
					<div class="position">Admin</div>
				</div>
			</div> -->
    </div>
    <div class="home-content">
      <div class="home-content-img">
        <img src="@/assets/img/NBCbackgroud.jpg" alt="" />
      </div>
    </div>
  </div>
</template>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<script>
import * as echarts from "echarts";
import vueSeamlessScroll from "vue-seamless-scroll";

import store from "@/store/index";
export default {
  name:'',
  components: {
    vueSeamlessScroll,
    
  },
  data() {
    return {
      week: "", //周期时间
      newDate: "", //日期
      userList: [], //用户列表
      departmentBar: {}, //部门柱形图
      departmentList: {}, //部门列表
      nameArr: [], //柱形图name
      valueArr: [], //柱形图value
      barOne: {}, //柱形图1
      barTwo: {}, //柱形图2
      thingtypeNum: "", //资产事件类型数量
      materialusageNum: "", //资产类型数量
      userInfo: {}, //用户信息
    };
  },
  methods: {
    //获取周几
    getTime() {
      let tempDate = new Date();
      let days = tempDate.getDay();
      switch (days) {
        case 1:
          this.week = "星期一";
          break;
        case 2:
          this.week = "星期二";
          break;
        case 3:
          this.week = "星期三";
          break;
        case 4:
          this.week = "星期四";
          break;
        case 5:
          this.week = "星期五";
          break;
        case 6:
          this.week = "星期六";
          break;
        case 0:
          this.week = "星期日";
          break;
      }
    },
    //获取年月日
    getDay() {
      const date = new Date();
      const year = date.getFullYear();
      const month =
        date.getMonth() + 1 >= 10
          ? date.getMonth() + 1
          : `0${date.getMonth() + 1}`;
      const day = date.getDate() >= 10 ? date.getDate() : `0${date.getDate()}`;
      this.newDate = `${year}年${month}月${day}日 `;
    },
    //跳转后台
    jumpDecive() {
      // if (this.userInfo.resourceList.length > 0) {
      // 	this.$router.push('/DeviceType');
      // } else {
      // 	this.$router.push('/Nonepage');
      // }
    },
  },
  computed: {},
  created() {
    this.getDay();
    this.getTime();
    //和风天气插件调用
    window.WIDGET = {
      CONFIG: {
        layout: "2",
        width: "230",
        height: "350",
        background: "1",
        dataColor: "FFFFFF",
        language: "zh",
        borderRadius: "5",
        key: "1cfdde7c235f44b2831147733d187af2",
      },
    };
    (function (d) {
      var c = d.createElement("link");
      c.rel = "stylesheet";
      c.href =
        "https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0";
      var s = d.createElement("script");
      s.src =
        "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
      var sn = d.getElementsByTagName("script")[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("nbcUserInfo"));
  },
};
</script>

<style lang="less" scoped>
.device-home {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background-color: #fff;

  .home-top {
    height: 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #afb4c4;
    padding: 1.25rem 1.5rem;

    .left {
      font-weight: 600;
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 0.9375rem;

      .user-icon {
        margin-right: 1rem;
      }

      .user-info {
        letter-spacing: 0.1rem;

        .name {
          font-weight: bold;
        }

        .position {
          color: #afb4c4;
        }
      }
    }
  }

  .home-content {
    height: 94%;

    .home-content-img {
      height: 100%;
      width: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .statusred {
    background-color: #dc143c;
  }

  .statusgreen {
    background-color: #16a951;
  }
}
</style>
